<template>
  <div
    id="home_wrap"
    class="home_wrap"
  >
    <!-- 标头 -->
    <div
      id="red_top_bg"
      class="red_top_bg"
    >
      <div class="logo">
        <img :src="logo">
      </div>
      <div class="language">
        <img src="../img/language/en_us.png">
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="swiper_container">
      <van-swipe
        v-show="loading"
        :autoplay="2500"
        class="swiper-container"
      >
        <van-swipe-item
          v-for="(image, index) in banners"
          :key="index"
        >
          <!-- @click="jump(image.url)" -->
          <img :src="image.img">
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 滚动消息 -->
    <div
      class="block_div notice"
      @click="$router.push('/notice')"
    >
      <van-notice-bar
        background="#FFFFFF"
        left-icon="volume-o"
        :text="notice.title"
      />
    </div>
    <!-- 行情价格 -->
    <div class="block_div   hq_box">
      <!-- 客服图标 -->
      <!-- <div
        class="kefu"
        :class="show_kefu?'':'kefu_hide'"
        @click="kefu_to"
      >
        <img
          class="kefu_img"
          src="../img/index/kefu.png"
        >
      </div> -->
      <div class="iframe">
        <iframe
          :src="macketUrl"
          width="100%"
          height="90px"
        />
      </div>
    </div>

    <!-- 快捷菜单 -->
    <!-- <div class="block_div  work_box">
			<div class="flex_center">
				<div v-for="(item,index) in menus" class="item" @click='jump(item.url)'>
					<div class="item_img"><img :src="require('../img/'+item.logo)" alt=""></div>
					<p class="item_title">{{item.title}}</p>
				</div>
			</div>
			<div class="flex_center">
				<div v-for="(item,index) in menus2" class="item" @click='jump(item.url)'>
					<div class="item_img"><img :src="require('../img/'+item.logo)" alt=""></div>
					<p class="item_title">{{item.title}}</p>
				</div>
			</div>
		</div> -->
    <!-- 货币价格 -->
    <!-- <div class="currency_tips">
			{{$t('index.exchangeRate')}}
		</div> -->


    <!-- 快捷充币 -->
    <div class="block_div flex_center quick_recharge">
      <div
        class="flex_center"
        style="width: 50%"
      >
        <div
          class="block_div flex_center quick_recharge"
          style="justify-content:space-between"
          @click="$router.push('/recharge')"
        >
          <div class="flex_center">
            <img
              class="img"
              src="../img/index/quick.png"
            >
            <span>{{ $t('index.quickRecharge') }}</span>
          </div>
          <div class="quick_right">
            <img src="../img/index/right.png">
          </div>
        </div>
      </div>
      <div
        class="quick_right"
        style="width: 50%"
      >
        <div class="block_div currency_wrap">
          <van-swipe
            style="height: 70px;"
            :autoplay="2000"
            vertical
            :show-indicators="false"
          >
            <van-swipe-item
              v-for="(lang, index) in langs"
              :key="index"
              @click="$router.push('/currency')"
            >
              <div class="currency_detail">
                <div
                  class="flex_center currency"
                  style="width: 100%;"
                >
                  <div class="flex_center logo">
                    <img
                      :src="lang.logo"
                      alt=""
                    >
                    <p>{{ lang.symbol }}</p>
                  </div>
                  <div class="price">
                    <div>
                      <span>1 USD</span>
                      <span> ≈ {{ lang.price }} {{ lang.symbol }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </div>

    <!-- 新闻资讯 -->
    <div class="currency_tips">
      {{ $t('index.news') }}
    </div>
    <div class="block_div news_box">
      <div
        v-for="(item, index) in news"
        :key="index"
        class="news_item" 
        @click="$router.push('/index/detail/' + item.id)"
      >
        <div class="pos-absolute">
          <div
            class="custom-title"
          >
            {{ item.title }}
          </div>
          <div
            class="custom-desc"
          >
            {{ item.sub_title }}
          </div>
        </div>
        <img
          v-lazy="item.cover"
          class="news_item_img"
          :alt="item.title"
        >
      </div>
    </div>


    <!-- 项目列表 -->
    <!-- <div class="currency_tips">
			{{$t('index.recommendedItem')}}
		</div> -->
    <!-- <div class="items">
			<div v-for="(item,index) in items" class="block_div item"
				@click="$router.push('/invest/detail/'+item.id)">
				<div class="logo">
					<img v-lazy="item.img2" />
					<div>{{item.title}}</div>
				</div>
				<div class="flex_center detail">
					<div>
						<div><span class="detail_name">{{$t('index.amount')}}</span><span class="detail_num">{{common.currency_symbol_basic()}}{{common.precision_basic(item.min)}}</span></div>
						<div><span class="detail_name">{{$t('index.cycle')}}</span><span class="detail_num">{{item.day}}{{item.type==3?$t('index.hour'):$t('index.day')}}</span></div>
					</div>
					<div>
						<div><span class="detail_name">{{item.type==1?$t('index.dailyRate'):$t('index.rate')}}</span><span class="detail_num">{{item.rate}}%</span></div>
						<div><span class="detail_name">{{$t('invest.income')}}</span><span class="detail_num">{{common.currency_symbol_basic()}}{{change(item)}}</span></div>
					</div>
				</div>
			</div>
		</div> -->
    <!-- APP -->
    <div
      v-if="!isApp && app.show"
      id="download_app"
      class="flex_center"
    >
      <div class="flex_center">
        <div
          class="app_close"
          @click="closeDown()"
        >
          X
        </div>
        <div class="app_logo">
          <img
            :src="app.logo"
            alt=""
            srcset=""
          >
        </div>
        <div class="app_name">
          <p>{{ app.name }}</p>
        </div>
      </div>
      <div
        class="basic_btn down_btn"
        @click="jump(app.url)"
      >
        {{ $t('index.downApp') }}
      </div>
    </div>
    <!-- 弹窗 -->
    <van-dialog
      v-model="show_tc"
      :confirm-button-text="$t('utils.confirm')"
    >
      <div
        class="popup"
        v-html="tc_content"
      />
    </van-dialog>
  </div>
</template>

<script>
import Vue from 'vue';
import Fetch from '../../utils/fetch';
import {
	Swipe,
	SwipeItem,
	Progress,
	Dialog,
	Field,
	Popup,
	NoticeBar,
	Lazyload,
	Search,
	Cell,
	Card,
	Image,
	CellGroup
} from "vant";

Vue.use(Progress).use(Dialog).use(Field).use(Popup).use(NoticeBar).use(Lazyload).use(Search).use(Cell).use(Card).use(Image).use(CellGroup);

export default {
	name: "Index",
	components: {
		VanSwipe: Swipe,
		VanSwipeItem: SwipeItem,
	},
	data() {
		return {
			language_logo: localStorage.getItem('language_logo'),
			logo: localStorage.getItem("logo2"),
			show_kefu: true,
			loading: false,
			notice: [],
			show_tc: false,
			tc_content: "",
			banners: [],
			items: [],
			news: [],
			langs: [],
			isApp: true,
			macketUrl: '',
			app: {
				"show": false,
				"name": "",
				"url": "",
				"logo": "",
			},
			value: '',
			products: [],
			products1: [{
				id: '1',
				name: '现货黄金',
				rate: -0.3,
				price: 25932.49
			}, {
				id: '2',
				name: '现货铜',
				rate: 0.3,
				price: 25932.49
			}, {
				id: '3',
				name: '股票Gold',
				rate: -0.3,
				price: 25932.49
			}, {
				id: '4',
				name: '股票Abx',
				rate: 0.3,
				price: 25932.49
			}]
		};
	},
	created() {
		if (window.plus) {
			window.plus.navigator.setStatusBarBackground('#FFFFFF');
			window.plus.navigator.setStatusBarStyle('dark');
		}
		let url = window.location.host.replace('www.', '');
		this.macketUrl = '../html/' + url + '.html';
		this.$parent.footer('index');
	},
	mounted() {
		this.start();
		this.changeLang();
	},
	methods: {
		changeLang() {
			localStorage.setItem("lang", 'en_us');
			localStorage.setItem('precision', '2');
			localStorage.setItem("language_logo", '../img/language/en_us.png');
		},
		listTemp(arrs) {
			let index = 0;
			let count = 3;
			let arrTemp = [];
			for (let i = 0; i < arrs.length; i++) {
				index = parseInt(i / count);
				if (arrTemp.length <= index) {
					arrTemp.push([]);
				}
				arrTemp[index].push(arrs[i]);
			}
			return arrTemp;
		},
		change(item) {
			if (item.type == 1) {
				return this.common.precision_basic(item.min * item.rate * item.day / 100);
			} else {
				return this.common.precision_basic(item.min * item.rate / 100);
			}
		},
		kefu_to() {
			if (this.show_kefu) {
				this.$router.push('/service');
			}
			this.show_kefu = !this.show_kefu;
		},
		jump(url) {
			if (url.indexOf('http') == 0) {
				window.location.href = url;
			} else {
				this.$router.push(url);
			}
		},
		start() {
			Fetch('/index/int').then((r) => {
				block: {
					if (r.data.popup.show == 1) {
						var popup_show = sessionStorage.getItem("popup_show");
						sessionStorage.setItem("popup_show", r.data.popup.num);
						if (popup_show != null && popup_show == 1) {
							break block;
						}
						this.tc_content = r.data.popup.content;
						this.show_tc = true;
					}
				}
				this.banners = r.data.banner;
				this.notice = r.data.notice;
				this.langs = r.data.langs;
				// this.items = r.data.items;
				this.products = this.listTemp(this.products1);
				this.app = r.data.version;
				this.getNewsData()
			});
		},
		getNewsData() {
			this.news = []
			Fetch('/video/videoList', {
				page: 1,
				listRows: 8,
				type: 0
			}).then(r => {
				if (r.data.length == 0) this.empty = true;
				var list = r.data.list;
				if (list.length > 0) {
					this.news = list
				}
				console.log(this.news)
				this.loading = true;
				this.showApp();
			});
		},
		showApp() {
			if (window.plus) {
				this.isApp = true;
			} else {
				if (this.app.show) {
					this.isApp = false;
					document.getElementById('red_top_bg').style.top = '60px';
					document.getElementById('home_wrap').style.paddingTop = '60px';
				}
			}
		},
		closeDown() {
			this.app.show = false;
			document.getElementById('red_top_bg').style.top = '0';
			document.getElementById('home_wrap').style.paddingTop = '0';
		}
	}
};
</script>

<style lang="less" scoped>
.home_wrap {
	margin-bottom: 60px;
}

.red_top_bg {
	position: fixed;
	top: 0;
	z-index: 10;
	height: 68px;
	padding: 10px 0;
	background: #FFFFFF;

	.logo {
		position: absolute;
		top: 10px;
		left: 3%;
		height: 48px;

		img {
			height: 100%;
		}
	}

	.language {
		position: absolute;
		top: 19px;
		right: 2%;
		height: 36px;

		img {
			height: 100%;
		}
	}
}

.swiper_container {
	// min-height: 182px;
	position: relative;
	background: #FFFFFF;
}

.swiper-container {
	width: 100%;
	margin: 80px 0 0 0;


	.van-swipe-item {
		overflow: hidden;
	}

	img {
		border-radius: 5px;
		margin-left: 3%;
		height: 100%;
		width: 94%;
	}
}


.notice {
	margin-bottom: 10px;
}

.hq_box {
	position: relative;
	margin-bottom: 15px;
	text-align: center;

	.hq_item {
		width: 33.33%;

		.hq_rate {
			margin: 8px 0;
		}

		.hq_price {
			font-size: 14px;
			font-weight: bold;
		}
	}
}

.work_box {
	padding: 10px 0 0 0;
	height: 160px;
	margin-bottom: 15px;

	.item {
		width: 33.33%;
		text-align: center;
		margin-bottom: 10px;

		.item_img {
			width: 100%;
			border-radius: 5px;
			overflow: hidden;

			img {
				width: 44px;
				height: 44px;
				padding: 4px;
			}
		}

		.item_title {
			width: 100%;
			line-height: 14px;
			font-size: 12px;
			color: #333333;
			text-align: center;
			transform: scale(0.85);
		}
	}
}

.kefu {
	position: absolute;
	left: 86%;
	top: 1%;
}

.currency_wrap {
	margin-bottom: 10px;

	img {
		width: 40px;
	}

	.currency_detail {
		padding: 20px 0;
	}

	.currency {
		justify-content: space-around;

		p {
			font-size: 14px;
			font-weight: bold;
		}

		.logo {
			p {
				margin-left: 5px;
			}
		}

		.price {
			color: #3CB371;
			font-weight: bold;
		}
	}
}

.quick_recharge {
	padding: 10px;
	margin-bottom: 15px;

	.img {
		width: 50px;
		margin-right: 10px;
	}

	.quick_right {
		img {
			width: 32px;
		}
	}
}

.news_box {
	margin-bottom: 15px;

	.news_item {
		margin-bottom: 10px;
		position: relative;
		.news_item_img{
			width: 100%;
			border-radius: 5px;
			max-height: 260px;
			cursor: pointer;
		}
		.pos-absolute{
			position: absolute;
			left: 10px;
			top: 10px;
			color: #fff;
			cursor: pointer;
			.custom-title {
				font-weight: 600;
				font-size: 16px;
			}
			.custom-desc{
				margin-top: 5px;
			}
		}
	}
}
.custom-thumb{
	.van-card__thumb{
		width: 100px;
		height: 100px;
	}
}
.popup {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	max-height: 60vh;
	padding: 26px 24px;
	overflow-y: auto;
	font-size: 14px;
	line-height: 20px;
}

.currency_tips {
	margin-bottom: 10px;
	margin-left: 3%;
	border-left: 5px solid #0F6EFF;
	padding-left: 10px;
	font-size: 14px;
	font-weight: bold;
}

.items {
	margin-bottom: 20px;

	.item {
		margin-bottom: 10px;


		.logo {
			position: relative;

			div {
				position: absolute;
				bottom: 0px;
				width: 100%;
				background: #FFFFFF;
				height: 30px;
				line-height: 30px;
				opacity: 0.8;
				font-weight: bold;
				padding: 0 10px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			img {
				width: 100%;
				border-radius: 5px;
				max-height: 260px;
			}
		}

		.detail {
			padding: 15px;
			line-height: 2;

			.detail_name {}

			.detail_num {
				font-weight: bold;
				color: #3CB371;
			}
		}
	}
}

#download_app {
	position: fixed;
	background: #fff;
	width: 100%;
	top: 0;
	height: 60px;
	z-index: 11;
	justify-content: space-between;
	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
	padding: 0 20px 0 0;

	.app_close {
		color: #999;
		width: 50px;
		line-height: 60px;
		height: 60px;
		text-align: center;
	}

	.app_logo {
		margin-right: 5px;

		img {
			height: 30px;
		}
	}

	.down_btn {
		padding: 0 15px;
		width: unset;
		height: 32px;
		line-height: 32px;
	}
}

/deep/.van-notice-bar {
	border-radius: 0 0 5px 5px;
}
</style>
